<!-- XHR backend example section start -->
<section id="xhr-backend-examples">
    <!-- XHR Backend -->
    <div class="card">
        <h4 class="card-header">Load Resources Using XHR</h4>
        <div class="card-body">
            <p class="card-text">This example demonstrates direct language switching on click or change event. Every time the link is clicked, i18next loads json file with selected language and initialize translation again, so new language appears without page reload.</p>
            <nav class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-dark navbar-shadow border-grey border-darken-2">
                <div class="navbar-wrapper" id="lng-direct-switch">
                    <div class="navbar-header">
                        <ul class="nav navbar-nav">
                            <li class="nav-item mobile-menu d-md-none float-left">
                                <button class="nav-link menu-toggle hamburger hamburger--arrow js-hamburger is-active"><span class="hamburger-box"></span><span class="hamburger-inner"></span></button>
                            </li>
                            <li class="nav-item">
                                <a href="index.html" class="navbar-brand nav-link"><img src="../../../app-assets/images/logo/logo-light.png" alt="logo"></a>
                            </li>
                            <li class="nav-item d-md-none float-right"><a data-toggle="collapse" data-target="#navbar-mobile1" class="nav-link open-navbar-container"><i class="la la-ellipsis-h pe-2x icon-rotate-right"></i></a></li>
                        </ul>
                    </div>
                    <div class="navbar-container content">
                        <div id="navbar-mobile1" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav lng-nav mr-auto">
                                <li class="nav-item"><a href="#" class="nav-link active" data-lng="en"><i class="flag-icon flag-icon-gb"></i> English</a></li>
                                <li class="nav-item"><a href="#" class="nav-link" data-lng="es"><i class="flag-icon flag-icon-es"></i> Spanish</a></li>
                                <li class="nav-item"><a href="#" class="nav-link" data-lng="pt"><i class="flag-icon flag-icon-pt"></i> Portuguese</a></li>
                                <li class="nav-item"><a href="#" class="nav-link" data-lng="fr"><i class="flag-icon flag-icon-fr"></i> French</a></li>
                            </ul>
                            <ul class="nav navbar-nav lng-dropdown float-right">
                                <li class="dropdown dropdown-language nav-item">
                                    <a id="dropdown-active-item" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link"><i class="flag-icon flag-icon-gb"></i> English<i class="caret"></i></a>
                                    <div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right">
                                        <a href="#" class="dropdown-item active" data-lng="en"><i class="flag-icon flag-icon-gb"></i> English</a>
                                        <a href="#" class="dropdown-item" data-lng="es"><i class="flag-icon flag-icon-es"></i> Spanish</a>
                                        <a href="#" class="dropdown-item" data-lng="pt"><i class="flag-icon flag-icon-pt"></i> Portuguese</a>
                                        <a href="#" class="dropdown-item" data-lng="fr"><i class="flag-icon flag-icon-fr"></i> French</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

            <div class="row mt-2">
                <div class="col-md-6">
                    <h5>Example Markup</h5>
                    <pre class="language-markup">
                        <code class="language-markup">
                            &lt;div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right"&gt;
                                &lt;a href="#" class="dropdown-item"&gt;
                                    &lt;i class="flag-icon flag-icon-gb"&gt;&lt;/i&gt; English
                                &lt;/a&gt;
                                &lt;a href="#" class="dropdown-item"&gt;
                                    &lt;i class="flag-icon flag-icon-es"&gt;&lt;/i&gt; Spanish
                                &lt;/a&gt;
                                &lt;a href="#" class="dropdown-item"&gt;
                                    &lt;i class="flag-icon flag-icon-pt"&gt;&lt;/i&gt; Portuguese
                                &lt;/a&gt;
                                &lt;a href="#" class="dropdown-item"&gt;
                                    &lt;i class="flag-icon flag-icon-fr"&gt;&lt;/i&gt; French
                                &lt;/a&gt;
                            &lt;/div&gt;
                        </code>
                    </pre>
                </div>
                <div class="col-md-6">
                    <h5>Js Code For Switching</h5>
                    <pre class="language-javascript">
                        <code class="language-javascript">
                            i18next
                                .use(window.i18nextXHRBackend)
                                .init({
                                    debug: true,
                                    fallbackLng: false,
                                    backend: {
                                        loadPath: "../../../app-assets/data/locales/{{lng}}/{{ns}}.json",
                                    },
                                    returnObjects: true
                                },
                                function (err, t) {
                                    // Initialize Localization
                                    jqueryI18next.init(i18next, $);
                                });
                        </code>
                    </pre>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // XHR backend example section end -->